<template>
	<view class="content">
		<empty :tipText="'暂无章节'" v-if="chapters.length==0"></empty>
		<block v-for="(item,index) in chapters">
			<view class="item" :key="item._id" @click="doExam(item._id,item.bank_id,item.title)">
				<view class="left">
					<view class="title">
						{{item.title}}
					</view>
					<view class="progress">
						共 {{item.question_num}} 题
					</view>
				</view>
				<view class="right" v-if="!hasBuy">
					<u-tag text="解 锁" mode="light" type="warning" shape="circle" />
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	var that
	export default {
		data() {
			return {
				cis: null,
				chapters: [],
				hasBuy: true
			}
		},
		onLoad(options) {
			that = this
			this.cid = options.cid
			this.getChapters()
		},
		methods: {
			doExam(cid, bank_id, title) {
				uni.vk.navigateTo("/uni_modules/uce-q-bank/pages/questions/questions?cid=" + cid + "&bank_id=" + bank_id +
					"&title=" + title)
			},
			getChapters() {
				uni.vk.callFunction({
					url: 'client/q_bank/pub/get_bank_chapters',
					data: {
						cid: this.cid
					},
					success(data) {
						that.chapters = data.rows
					},
					fail(e) {
						that.$refs.uToast.show({
							title: e.msg
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: rgb(247, 248, 250);
	}

	.content {
		position: relative;
		padding: 40rpx 30rpx;

		.item {
			width: 100%;
			height: 160rpx;
			background: #FFFFFF;
			border-radius: 15rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.left {
				height: 100%;
				display: flex;
				flex: 1;
				flex-direction: column;
				justify-content: center;

				.title {
					font-size: 34rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				.progress {
					font-size: 28rpx;
					color: #999;
				}
			}

			.right {
				// width: 90rpx;
				// height: 60rpx;
			}
		}
	}
</style>
